<template>
  <div>
    <el-form
      :ref="addForm"
      :model="supplierInquiry"
      label-width="auto"
      style="
        max-width: 1000px;
        margin: auto;
        background-color: #fff;
        padding: 10px;
      "

    >
      <div
        style="
          height: 50px;
          line-height: 50px;
          background-color: #9ca3af;
          padding-left: 20px;
        "
      >
        基础信息
      </div>
      <el-row style="margin-top: 30px">
        <el-col :span="12">
          <el-form-item label="询价客户" prop="account">
            <el-input :disabled="true" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="询价日期" prop="password">
            <el-input :disabled="true" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="机器品牌" prop="name">
            <el-select :disabled="true" v-model="supplierInquiry.brand">
              <el-option value="Metso">Metso</el-option>
              <el-option value="Sandvik">Sandvik</el-option>
              <el-option value="Extec">Extec</el-option>
              <el-option value="Symons">Symons</el-option>
              <el-option value="Kleemann">Kleemann</el-option>
              <el-option value="Hart1">Hart1</el-option>
              <el-option value="Telsmith">Telsmith</el-option>
              <el-option value="Hazmag">Hazmag</el-option>
              <el-option value="Terex">Terex</el-option>
              <el-option value="Lippman">Lippman</el-option>
              <el-option value="Trio">Trio</el-option>
              <el-option value="Svedala">Svedala</el-option>
              <el-option value="Komatsu">Komatsu</el-option>
              <el-option value="SBM">SBM</el-option>
              <el-option value="Parker">Parker</el-option>
              <el-option value="KPI&JCI">KPI&JCI</el-option>
              <el-option value="Krupp">Krupp</el-option>
              <el-option value="未知">未知</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机器型号">
            <el-select :disabled="true" v-model="supplierInquiry.model">
              <el-option value="板锤">板锤</el-option>
              <el-option value="齿板圆锥">齿板圆锥</el-option>
              <el-option value="铜套">铜套</el-option>
              <el-option value="筛网">筛网</el-option>
              <el-option value="输送带">输送带</el-option>
              <el-option value="托辊">托辊</el-option>
              <el-option value="美卓山特非耐磨件">美卓山特非耐磨件</el-option>
              <el-option value="VSI配件询价">VSI配件询价</el-option>
              <el-option value="洗砂机配件">洗砂机配件</el-option>
              <el-option value="破碎设备询盘">破碎设备询盘</el-option>
              <el-option value="磨粉类设备询价">磨粉类设备询价</el-option>
              <el-option value="选矿类设备询价">选矿类设备询价</el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="公司是否做过">
            <el-select :disabled="true">
              <el-option
                v-for="item in iscreateOptions"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品类型">
            <el-select :disabled="true" v-model="supplierInquiry.productType">
              <el-option
                v-for="item in materialsOptions"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <div
        style="
          height: 50px;
          line-height: 50px;
          background-color: #9ca3af;
          padding-left: 20px;
        "
      >
        产品信息
      </div>
      <el-table :data="tableData" style="width: 1000px; margin: auto" border>
        <el-table-column prop="picurl" label="产品图片" width="100" />
        <el-table-column prop="name" label="产品名称" width="130"/>
        <el-table-column prop="model" label="产品型号" width="130" />
        <el-table-column prop="price" label="产品价格" width="130" />
        <el-table-column label="需求数量" width="170">
          <template v-slot="{ row }">
            <el-input-number v-model="row.num" readonly/>
          </template>
        </el-table-column>
        <el-table-column label="操作" style="width: 500px;">
          <template v-slot="{ row }">
            <el-link style="font-size: 10px;margin-left: 5px">查看报价</el-link>
            <el-link style="font-size: 10px;margin-left: 5px">历史报价</el-link>
            <el-link style="font-size: 10px;margin-left: 5px">索要产品参数</el-link>
            <el-link style="font-size: 10px;margin-left: 5px" >索要产品外形图</el-link>
            <el-link style="font-size: 10px;margin-left: 5px">查看产品参数</el-link>
            <el-link style="font-size: 10px;margin-left: 5px">查看产品外形图</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div style="width: 1000px">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button type="info" @click="reset">取消</el-button>
      </div>
    </el-form>

  </div>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import { useRouter, useRoute } from "vue-router";
import { queryDictChild } from "@/api/dict.js";
import {
  querySupplierInquiryById,
  updateSupplierInquiry
} from "@/api/supplierInquiry.js";
import chooseProduct from "./ChooseProduct.vue";
import { ElMessage } from "element-plus";
import { queryProductList } from "@/api/product.js";

//绑定表单
const tableData = ref([]);

//路由跳转
const router = useRouter();
//路由信息
const route = useRoute();

//是否展示
const isShow = ref(false);

const addForm = ref();

//数据
const supplierInquiry = ref({
  customerId: "",
  createTime: "",
  brand: "",
  model: "",
  productType: ""
});

//是否做过
const iscreateOptions = [
  {
    id: 1,
    name: "是"
  },
  {
    id: 2,
    name: "否"
  },
  {
    id: 3,
    name: "未知"
  }
];

//产品分类
const materialsOptions = ref([
  {
    id: 1001,
    name: "产品询价"
  },
  {
    id: 1002,
    name: "托辊"
  },
  {
    id: 1003,
    name: "筛网"
  }
]);

//查询询价单和询价单明细
async function querySupplierInquiry(id) {

  //根据id查询
  let res = await querySupplierInquiryById(id);
  if (res.code == 200) {
    tableData.value = res.data.supplierInquiryDetail;
    supplierInquiry.value = res.data;

  }
}

//保存数据
async function save() {
  // 更新 supplierInquiry 中的 supplierInquiryDetail

  let res = await updateSupplierInquiry(supplierInquiry.value);
  if (res.code == 200) {
    ElMessage.success("更新成功");
    router.push("/product/inquiry");
  }
}

//取消
function reset() {
  router.push("/product/inquiry");
}

//
onBeforeMount(() => {
  //获取id
  let id = route.query.id;
  console.log(id);
  //查询询价单id
  querySupplierInquiry(id);
});
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>
